<!DOCTYPE html>

<html>
  <head>
	<meta charset="utf-8">
    <title>移动互联</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="images/logo.png" rel="shortcut icon"> <!-- 图标地址  -->
	<!-- Bootstrap -->
	<link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
	<link href="css/custom-light.css" rel="stylesheet" media="screen">  
    <link href="css/animate-custom.css" type="text/css" rel="stylesheet" />
	
	<!-- slider style css -->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/slider-custom.css" />
	<!-- Javascript -->
	<script src="js/jquery.js"></script>
    <script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
    <script src="js/jquery.isotope.min.js"></script>  
    <script src="js/lightbox-2.6.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="90">  <!-- Bootstrap 滚动插件 -->
<!-- Navigation -->
<div class="navbar navbar-fixed-top animated bounceInDown">
<div class="navbar-inner ">
    <div class="container">
      <!-- Response Nav  -->
      <a class="btn btn-navbar " data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
	  <!-- Logo  -->
      <a class="brand logo" href="#">
         <img alt="" src="images/logo.png">
		 移动<span>互联</span>
       </a>
	  <!-- Menu  -->
	  <div class="nav-collapse collapse ">
        <ul class="nav navlinks pull-right" id="navigation">
           <li id="homelink" class="active"><a href="#top">首页</a></li>
           <li id="expertieslink"><a href="#welcome">关于</a></li>
           <li id="ourworklink"><a href="#process">服务</a></li>
           <li id="aboutlink"><a href="#webdemo">项目</a></li>
           <li id="bloglink"><a href="#team">团队介绍</a></li>
           <li id="contactlink"><a href="#contact">联系我们</a></li>
        </ul>
      </div>
    </div>
</div>
</div>
<!-- Slider -->
<div class="container-fluid navpadding animated fadeIn delay3s"  id="top">
<div class="slider-st2">
<div id="slider" class="sl-slider-wrapper">

				<div class="sl-slider">
				
					<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
						<div class="sl-slide-inner">
							<div class="bg-img bg-img-1"></div>
							<h2>Follow Your Interests，Discover Your World</h2>
							<blockquote><p>跟随你的兴趣，探索你的世界</p>
                            <p class="img-margin"><img src="images/slider-img1.png"  alt=""></p>
                             </blockquote>
                             
						</div>
					</div>
					
					<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
						<div class="sl-slide-inner">
							<div class="bg-img bg-img-2"></div>
							<h2>mobile friendly layout</h2>
                            <blockquote><p>随着目前大屏幕移动设备的普及，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验</p>
                            <p class="img2-margin"><img src="images/slider-img2.png"  alt=""></p></blockquote>

                             
						</div>
					</div>
					
					<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
						<div class="sl-slide-inner">
							<div class="bg-img bg-img-3"></div>
							<h2>Dum spiro, spero.</h2>
							<blockquote><p>握好手中的道具，为梦想而战</p>
                            <p class="img3-margin"><img src="images/slider-img3.png"  alt=""></p></blockquote>
						</div>
					</div>  

				</div>
				
				<nav id="nav-dots" class="nav-dots">
					<span class="nav-dot-current"></span>
					<span></span>
					<span></span>

				</nav> 

			</div>
 </div>
</div>
<!-- Welcome -->
<div id="welcome">
<div class="container">
<div class="row">
<div class="span6 offset3 animation-start fadeInUp invisible" data-appear-top-offset="-200"><h1>Welcome</h1></div>
<div class="span10 offset1 animation-start fadeInDown invisible" data-appear-top-offset="-200"><h2>移动互联网工作室是一支以发掘和培养个人兴趣爱好，提升修养，提高实践能力为目标，专注于互联网和移动互联网技术发展的新型团队</h2></div>
<div class="span10 offset1 desc animation-start flipInX invisible" data-appear-top-offset="-300"></div> 
</div>
</div>
</div>
<!-- About -->
<div id="experties" class="expertiesBg">
<div class="container">
<div class="row-fluid">
<div class="span12 animation-start fadeInUp invisible" data-appear-top-offset="-200"><h1 class="colorWhite">About</h1></div>
<div class="span12 animation-start fadeInDown invisible" data-appear-top-offset="-200"><h2 class="colorWhite">我们提供网站设计与制作（网站界面设计，PHP网站开发，JavaWeb网站开发）和手机应用开发（安卓应用，iOS应用）</h2></div>
<div class="span10 offset1 colorWhite oneline hidden-phone animation-start flipInX invisible" data-appear-top-offset="-400">We can provide Internet and mobile solutions for SMEs</div>
</div>
</div>
</div>
<!-- Learn More -->
<div id="process" class="paddingtop60 paddingbottom30">
<div class="container">
<div class="row-fluid">
<div class="span4">
<div class="process">
<div class="icon animation-start flipInY invisible" data-appear-top-offset="-400"><img alt="" src="images/523.png"></div>
<div class="title animation-start fadeInDown invisible" data-appear-top-offset="-300">网站开发</div>
<div class="content animation-start fadeInDown invisible" data-appear-top-offset="-200">你是否萌生过开发一个漂亮网站的想法，想了解一下形形色色的网站是如何搭建起来的，你是否在图书馆四处翻找一些有关动态网站技术的书籍，想了解和学习更多的知识？.....</div>
<div class="divider visible-phone"></div>
</div>
</div>
<div class="span4"><div class="process">
<div class="icon animation-start flipInY invisible delay1s" data-appear-top-offset="-400"><img alt="" src="images/522.png"></div>
<div class="title animation-start fadeInDown invisible" data-appear-top-offset="-300">UI设计</div>
<div class="content animation-start fadeInDown invisible" data-appear-top-offset="-200">UI即User Interface的简称，UI设计是指对软件的人机交互、操作逻辑界面美观的整体设计。好的UI设计让软件变得很有个性有品位，还要让软件操作变得舒适、简单、自由.....</div>
<div class="divider  visible-phone"></div>
</div></div>
<div class="span4"><div class="process">
<div class="icon animation-start flipInY invisible delay1s" data-appear-top-offset="-400"><img alt="" src="images/521.png"></div>
<div class="title animation-start fadeInDown invisible" data-appear-top-offset="-300">移动开发</div>
<div class="content animation-start fadeInDown invisible" data-appear-top-offset="-200">手机安装了各式各样的APP，你是否想开发一个简单实用的APP，想了解各种移动开发是如何折腾出来的，手机网站开发，Android开发、微信公众平台开发，你感兴趣吗？.....</div>
<div class="divider  visible-phone"></div>
</div></div>
</div>
</div>
</div>

<!-- Our Skill -->
<div id="ourwork"  class="paddingtop60 skillBg"> <!-- id="ourskills" -->

<div class="container">
<div class="row-fluid">
<div class="span12 marginbottom70 animation-start fadeInLeft invisible" data-appear-top-offset="-200"><h3 class="colorOrange">Our Skills</h3></div>  
<div class="software" data-appear-top-offset="-400">
        <div class="skill-content">
          <div class="progress-bar stripes1">
            <div class="skill-in" title="101" ><div class="info-skills">Web design</div></div>
          </div>
          <div class="percent">100%</div>
        </div>
		<div class="skill-content">
          <div class="progress-bar stripes2">
            <div class="skill-in" title="91" ><div class="info-skills">Web Development</div></div>
          </div>
          <div class="percent">90%</div>
        </div>
		<div class="skill-content">
          <div class="progress-bar stripes1">
            <div class="skill-in" title="80"><div class="info-skills">joomla</div></div>
          </div>
          <div class="percent">79%</div>
        </div>
		<div class="skill-content">
          <div class="progress-bar stripes2">
            <div class="skill-in" title="86"><div class="info-skills">PHP</div></div>
          </div>
          <div class="percent">85%</div>
        </div>
		<!--<div class="span10 offset1 desc animation-start flipInX invisible" data-appear-top-offset="-300"></div> -->
</div>
</div>
</div>
</div>

<!-- Our Work -->
<div id="webdemo" class="skillBg">
<div class="container paddingbottom60">
<div class="row">
<div class="span12 animation-start fadeInUp animated marginbottom70" data-appear-top-offset="-200"><h1>Out Work</h1></div>
<div class="container">
<div class="row imgWidth">
<div class="span4 element graphic-design marginbottom20 "><a href="http://learn.ydhl.org/team-hsp/" target="blank" data-lightbox="Portfolio"><img src="images/webdemo/sam-1.png" alt=""></a></div>
<div class="span4 element graphic-design  illustration web-design marginbottom20 "><a href="http://learn.ydhl.org/team-hsp/index.php/features/20-2013-10-31-07-39-13" target="blank" data-lightbox="Portfolio"><img src="images/webdemo/sam-2.png" alt=""></a></div>
<div class="span4 element illustration  marginbottom20"><a href="http://smile.3eweb.com.cn/" target="blank" data-lightbox="Portfolio"><img src="images/webdemo/sam-3.png" alt=""></a></div>
<div class="span4 element graphic-design marginbottom20 "><a href="http://www.sysung-etri.com" target="blank" data-lightbox="Portfolio"><img src="images/webdemo/sam-4.jpg" alt=""></a></div>
<div class="span4 element graphic-design  illustration web-design marginbottom20 "><a href="http://zuld.v011.10000net.cn/" target="blank" data-lightbox="Portfolio"><img src="images/webdemo/sam-5.jpg" alt=""></a></div>
<div class="span4 element illustration  marginbottom20"><a href=" http://ieee-rfidta.org" target="blank" data-lightbox="Portfolio"><img src="images/webdemo/sam-6.jpg" alt=""></a></div>
</div>
</div>
</div>
</div>
</div>
<!-- Our Team -->
<div id="team" class="paddingtop60">
<div class="container mobilpad">
<div class="row">
<div class="span12 marginbottom70 animation-start fadeInRight invisible" data-appear-top-offset="-200"><h3>Meet the Team</h3></div>
<div class="span12 marginbottom30 animation-start fadeInUp invisible" data-appear-top-offset="-200">
<div class="team-img"><h2 class="colorBlack">移动互联工作室成立于2008年10月1号。本团队的创立成员主要来自于电子通信与软件工程系及艺术设计学专业，是一个极具专业性质的团队。随着团队的不断发展和壮大，我们期待着不同系不同专业的各种人才的加入，一起为我们的理想而奋斗。团队除了致力于自身发展，也涉足于培训教育领域，带领和培养新生，在全校范围内营造一个积极向上，开拓创新的氛围，鼓励和引导大学生自主创业。</h2><!--<img src="images/team.jpg" alt="团队负责人梁耀和">--></div>
<div class="teamDesc">
<!--<p class="title"></p>-->
<p class="desig"></p>
</div>

</div>

</div>
</div>
</div>
</div>

<!-- Cantact --> 
<div id="contact" class="contactBg ">
<div class="container">
<div class="row">
<div class="span12 animation-start fadeInUp invisible" data-appear-top-offset="-200">
  <h1 class="colorWhite">Let's Talk?</h1></div>
<div class="span10 offset1 paddingbottom30 animation-start fadeInDown invisible" data-appear-top-offset="-200"><h2 class="colorWhite">工作室负责人：金浪同学&nbsp&nbspTel:684678&nbsp&nbsp蔡东同学&nbsp&nbspTel:666576&nbsp&nbsp<br/>QQ群：252316094&nbsp&nbsp&nbsp&nbspEmail:team@ydhl.org <!--Weibo:<a href="http://weibo.com/ydhlgzs?topnav=1&wvr=5&topsug=1">@移动互联工作室</a>--> &nbsp&nbspAddress:中山大学南方学院3实205<!--Feel free to contact us for any inquiries, if you have any questions about our work or just say hello.--></h2></div>
<div class="span6 offset3">
<div class="contactSocial">
<ul class="unstyled inline">
<li class="animation-start pulse  " data-appear-top-offset="-200"><a href="#"><i class="iconf-facebook-circled"></i></a></li>
<li class="animation-start pulse delay1s" data-appear-top-offset="-200"><a href="#"><i class="iconf-twitter-circled"></i></a></li>
<li class="animation-start pulse delay2s" data-appear-top-offset="-200"><a href="#"><i class="iconf-gplus-circled"></i></a></li>
<li class="animation-start pulse delay3s" data-appear-top-offset="-200"><a href="#"><i class="iconf-pinterest-circled"></i></a></li>
</ul>
</div>
</div>
</div>
</div> 
<div class="container-fluid">
<div class="footer-line"></div>
<div class="row-fluid">
<div class="span12 copyright">© 2013 Ydhl.org Design by 移动互联工作室</div>
</div>
</div>

<!-- Javascripts --> 
		<script src="js/custom.js"></script>
 		<script src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
		<script type="text/javascript" src="js/jquery.slitslider.js"></script>
        <script src="js/bootstrap-scrollspy.js"></script>
        <script src="js/jquery.appear.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-40403312-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

  // our skill
     $('.skill-in[title]').each(function(){
	   var progress = $(this);
	   var percentage = Math.ceil($(this).attr('title'));
	   //alert(percentage);
	   $({countNum:0}).animate({countNum:percentage},{
	       duration:2000,
		   easing:'linear',
		   step: function(){
		       var pct = Math.floor(this.countNum) + '%';				   
			   progress.css("width",pct);
			   }
		   });
	   });
</script>
	  
</body>
</html>